﻿@model CoffeeMobile.Models.ViewModels.AddEditNewFoodModel
@{
    ViewBag.Title = "Add";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
@section Header{
    @Html.ActionLink("Quay lại", "Index", "Foods", null, new Dictionary<string, object> { { "data-icon", "back" }, { "class", "ui-btn-left" } })
    <h1>
        <span>Edit " </span>@Model.Name<span>"</span>
    </h1>
}
@using (Html.BeginForm("Edit", "Foods", FormMethod.Post, new { enctype = "multipart/form-data", data_ajax = "false" }))
{
    @Html.AntiForgeryToken()
    @Html.ValidationSummary(true)
    @Html.HiddenFor(p => p.ID)
    <div>
        <div style="width: 30%; float: left;">
            @{
    Html.ViewContext.Writer.Write("<img src=" + @Url.Content("../../Content/img/" + @Model.Image) + " width='160px' height='160px'/>");
            }
        </div>
        <div style="width: 50%; float: right; text-align: center; margin-right: 30px;">
            @*@Html.HiddenFor(p => p.ID)
            @Html.HiddenFor(p => p.Image)
            @Html.HiddenFor(p => p.FoodGroupID)
            <input type="submit" class="dASButton" value="Xác nhận" />
            @Html.ActionLink("Hủy", "Index", "Foods", null, new Dictionary<string, object> { { "data-role", "button" } })*@
        </div>
    </div>
    <ul data-role="listview" data-inset="true">
        <li data-role="fieldcontain">
            @Html.LabelFor(p => p.Name)
            @Html.TextBoxFor(p => p.Name)
            @Html.ValidationMessageFor(p => p.Name)
        </li>
        <li data-role="fieldcontain">
            @Html.LabelFor(p => p.Description)
            @Html.TextAreaFor(p => p.Description)
            @Html.ValidationMessageFor(p => p.Description)
        </li>
        <li data-role="fieldcontain">
            @Html.LabelFor(p => p.UnitPrice)
            @Html.TextBoxFor(p => p.UnitPrice, new Dictionary<string, object> { { "type", "number" }, { "data-clear-btn", "true" } })
            @Html.ValidationMessageFor(p => p.UnitPrice)
        </li>
        <li data-role="fieldcontain">
            @Html.LabelFor(p => p.Image)
            @Html.TextBoxFor(p => p.Image, new Dictionary<string, object> { { "type", "file" }, { "data-clear-btn", "true" } })
            @Html.ValidationMessageFor(p => p.Image)
        </li>
        <li data-role="fieldcontain">
            @Html.LabelFor(p => p.FoodGroupID)
            @Html.DropDownListFor(p => p.FoodGroupID, new SelectList(ViewBag.FoodGroups, "GroupID", "Name", ViewBag.FoodGroupName))
            @Html.ValidationMessageFor(p => p.FoodGroupID)
        </li>
        <input type="submit" value="Xác nhận" data-icon="plus" data-theme="b" id="btnSubmit">
        @*<input type="button" value="Hủy" data-icon="delete" data-theme="b">*@
    </ul>
}
@section footer{
    <div data-role="navbar" data-iconpos="top">
        <ul id="mylist">
            <li>@Html.ActionLink("Thêm mới", "Create", "Foods", new { }, new Dictionary<string, object> { })</li>
            <li>@Html.ActionLink("Làm mới", "Clear", "Tables", new { }, new Dictionary<string, object> { })</li>
        </ul>
    </div>
}
@section scripts{
    <script type="text/javascript">
        //get file size
        function GetFileSize(fileid) {
            try {
                var fileSize = 0;
                //for IE
                if ($.browser.msie) {
                    //before making an object of ActiveXObject, 
                    //please make sure ActiveX is enabled in your IE browser
                    var objFSO = new ActiveXObject("Scripting.FileSystemObject"); var filePath = $("#" + fileid)[0].value;
                    var objFile = objFSO.getFile(filePath);
                    var fileSize = objFile.size; //size in kb
                    fileSize = fileSize / 1048576; //size in mb 
                }
                //for FF, Safari, Opeara and Others
                else {
                    fileSize = $("#" + fileid)[0].files[0].size //size in kb
                    fileSize = fileSize / 1048576; //size in mb 
                }

                // alert("Uploaded File Size is" + fileSize + "MB");
                return fileSize;
            }
            catch (e) {
                alert("Error is :" + e);
            }
        }

        //get file path from client system
        function getNameFromPath(strFilepath) {

            var objRE = new RegExp(/([^\/\\]+)$/);
            var strName = objRE.exec(strFilepath);

            if (strName == null) {
                return null;
            }
            else {
                return strName[0];
            }

        }

        $("#btnSubmit").live("click", function () {

            if ($('#fileToUpload').val() == "") {
                $("#spanfile").html("Please upload file");
                return false;
            }
            else {
                return checkfile();
            }
        });

        function checkfile() {
            var file = getNameFromPath($("#fileToUpload").val());
            if (file != null) {
                var extension = file.substr((file.lastIndexOf('.') + 1));
                //  alert(extension);
                switch (extension) {
                    case 'jpg':
                    case 'png':
                    case 'gif':
                    case 'pdf':
                        flag = true;
                        break;
                    default:
                        flag = false;
                }
            }
            if (flag == false) {
                $("#spanfile").text("You can upload only jpg,png,gif,pdf extension file");
                return false;

            }
            else {
                var size = GetFileSize('fileToUpload');
                if (size > 3) {
                    $("#spanfile").text("You can upload file up to 3 MB");
                    return false;
                }
                else {
                    $("#spanfile").text("");
                }
            }
        }
        $(function () {
            $("#fileToUpload").change(function () {
                checkfile();
            });
        });
    </script>
}
